<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.btn{
				cursor:pointer;
				border:1px solid transparent;
				text-align: center;
				margin: 5px;
				padding: 6px 12px;
				font-size: 14px;
				border-radius: 4px;
			}
			.btn.default{
				background-color: #fff;
				color:#333;
				border-color: #ccc;
			}
			.btn.blue{
				background-color: #428bca;
				color:white;
				border-color: #357ebd;
			}
			.btn.green{
				color: #fff;
				background-color: #47a447;
				border-color: #398439;
			}
			.btn.orange{
				color: #fff;
			  	background-color: #ed9c28;
			  	border-color: #d58512;
			}
		</style>
	</head>
	<body>
		<div>
			<button id="btnDefault" class="btn default" onclick="testDefault()">Default</button>
			<button id="btnBlue" class="btn blue" onclick="testBlue()">Blue</button>
			<button id="btnGreen" class="btn green" onclick="testGreen()">Green</button>
			<button id="btnOrange" class="btn orange" onclick="testOrange()">Orange</button>
			<button id="btnNone" onclick="testNone()">None</button>
		</div>
		<div>
			<input id="btnShow" type="button" onclick="testShow()" value="隐藏Blue" />
		</div>
		<script>
			function testDefault(){
				document.getElementById("btnDefault").style.width = "200px";
			}
			function testBlue(){
				var btnBlue = document.getElementsByClassName("btn blue")[0];
				if(btnBlue.style.color == "black"){
					btnBlue.style.color = "white";
				}else{
					btnBlue.style.color = "black";
				}
			}
			function testGreen(){
				var btnGreen = document.getElementById("btnGreen");
				var btnBlue = document.getElementById("btnBlue");
				btnGreen.className = btnBlue.className;
			}
			function testOrange(){
				var btnOrange = document.getElementById("btnOrange");
				btnOrange.classList.remove("btn");
				btnOrange.classList.remove("orange");
			}
			function testNone(){
				var btnNone = document.getElementById("btnNone");
				btnNone.classList.add("btn");
				btnNone.classList.add("orange");
			}
			function testShow(){
				var btnBlue = document.getElementById("btnBlue");
				var btnShow = document.getElementById("btnShow");
				// 尝试使用display来替换visibility属性并比较不同
				if(btnBlue.style.visibility == "hidden"){
					btnBlue.style.visibility = "visible";
					btnBlue.value = "隐藏";
				} else{
					btnBlue.style.visibility = "hidden"
					btnShow.value = "显示";
				}
			}
		</script>
	</body>
</html>
